import React, { useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  Modal
} from 'react-native';

const EffectSelectionModal = ({ 
  visible, 
  onClose, 
  onSubmit 
}: { 
  visible: boolean, 
  onClose: () => void, 
  onSubmit: (effect: string) => void 
}) => {
  // 状态管理
  const [selectedEffect, setSelectedEffect] = useState('优质');

  // 效果选项配置
  const effectOptions = [
    { 
      id: '优质', 
      title: '优质', 
      description: '使用优质模型，内容效果和长度优秀。' 
    },
    { 
      id: '超优质', 
      title: '超优质', 
      description: '使用超优质模型，内容更加丰富，逻辑更加严谨，但生成较慢。' 
    },
    { 
      id: '引用网络数据', 
      title: '引用网络数据', 
      description: '引用网络数据，内容更加丰富，但可能存在不准确信息。' 
    }
  ];
  
  const handleSubmit = () => {
    onSubmit(selectedEffect);
  };
  
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <View style={styles.header}>
            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeButton}>取消</Text>
            </TouchableOpacity>
            <Text style={styles.title}>选择效果</Text>
            <TouchableOpacity onPress={handleSubmit}>
              <Text style={styles.doneButton}>确定</Text>
            </TouchableOpacity>
          </View>
          
          <View style={styles.effectsContainer}>
            {effectOptions.map((effect) => (
              <TouchableOpacity
                key={effect.id}
                style={[
                  styles.effectOption,
                  selectedEffect === effect.id && styles.selectedEffect
                ]}
                onPress={() => setSelectedEffect(effect.id)}
              >
                <View style={styles.effectHeader}>
                  <Text style={[
                    styles.effectTitle,
                    selectedEffect === effect.id && styles.selectedText
                  ]}>
                    {effect.title}
                  </Text>
                  {selectedEffect === effect.id && (
                    <View style={styles.checkmark}>
                      <Text style={styles.checkmarkText}>✓</Text>
                    </View>
                  )}
                </View>
                <Text style={[
                  styles.effectDescription,
                  selectedEffect === effect.id && styles.selectedDescText
                ]}>
                  {effect.description}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: 30,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  title: {
    fontSize: 17,
    fontWeight: 'bold',
  },
  closeButton: {
    fontSize: 16,
    color: '#666',
  },
  doneButton: {
    fontSize: 16,
    color: '#4a90e2',
    fontWeight: '500',
  },
  effectsContainer: {
    padding: 15,
  },
  effectOption: {
    backgroundColor: '#f5f5f5',
    borderRadius: 10,
    padding: 15,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: '#f0f0f0',
  },
  selectedEffect: {
    backgroundColor: '#e6f2ff',
    borderColor: '#4a90e2',
  },
  effectHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  effectTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
  selectedText: {
    color: '#4a90e2',
  },
  effectDescription: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
  selectedDescText: {
    color: '#444',
  },
  checkmark: {
    width: 22,
    height: 22,
    borderRadius: 11,
    backgroundColor: '#4a90e2',
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkmarkText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 14,
  },
});

export default EffectSelectionModal; 